<script setup lang="ts">
import {ref} from 'vue'
import {menu} from '@/web/api'

const isCollapse = ref(false)
const menuarr = menu()
const uniqueOpened = ref(true)

</script>

<template>
    <el-aside class="aside">
        <el-menu
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            :unique-opened="uniqueOpened"
            router>
            <template v-for="(item,index) in menuarr" :key="index">
                <template v-if="item.childs">
                    <el-sub-menu :index="index.toString()">
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="child in item.childs" :key="child.title" :index="child.path">{{child.title}}</el-menu-item>
                    </el-sub-menu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.path">
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <template #title>{{item.title}}</template>    
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </el-aside>    
</template>

<style scoped>
.aside {
  width: 12.5rem;
  height: 100vh;
}
</style>





